import React, {Component} from 'react'
import {
    View,
    Text,
    Image,
    StyleSheet,
    ListView,
    TouchableOpacity
} from 'react-native'

let Dimensions = require('Dimensions')
var {width} = Dimensions.get('window')

export default class ShopCenter extends Component {

    constructor(props) {
        super(props)
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
            size: 0
        }
        this.fetchData(); //这里不能省略（），否则不能执行
    }

    fetchData() {
        fetch('http://localhost:8081/localdata/ShopCenterShops.json')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseJson.data),
                    size: responseJson.data.length
                })
            })
            .done();
    }

    itemClick(){
        alert('onclick')
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.titleContainer} onPress={this.itemClick}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <Image style={styles.titleImage} source={require('../../../imgs/gwzx.png')}/>
                        <Text style={styles.titleText}>购物中心</Text>
                    </View>


                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <Text
                            style={styles.titleSubdes}>全部{this.state.size}家</Text>
                        <Image style={{width: 10, height: 15}}
                               source={require('../../../imgs/icon_cell_rightarrow.png')}/>
                    </View>
                </TouchableOpacity>
                {/* 底部list */}
                <ListView
                    showsHorizontalScrollIndicator={false}
                    contentContainerStyle={styles.listStyle}
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow}
                    horizontal={true}
                />
            </View>
        )
    }

    _renderRow(itemData) {
        console.log('----- itemData -----')
        console.log(itemData)
        return (
            <View style={styles.listItemStyle}>
                <View style={styles.imageContainer}>
                    <Image
                        style={styles.image}
                        source={{uri: 'http://localhost:8081/imgs/' + itemData.shopImage + '.png'}}/>

                    <Text style={styles.saleCount}>{itemData.saleCount}家优惠</Text>
                </View>

                <View style={styles.shopName}>
                    <Text>{itemData.shopName}</Text>
                </View>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    shopName: {
        height: 40,
        justifyContent: 'center'
    },
    saleCount: {
        position: 'absolute',
        bottom: 18,
        fontSize: 12,
        padding: 2,
        backgroundColor: 'rgba(255,255,0, 0.8)'
    },
    image: {
        height: 90,
        width: (width - 60) / 3,
    },
    imageContainer: {
        width: (width - 60) / 3,
        height: 90,
        marginLeft: 10,
        marginRight: 10,
        justifyContent: 'space-between'
    },
    listItemStyle: {
        paddingTop: 10,
        height: 140,
        backgroundColor: '#fff',
        alignItems: 'center'
    },
    listStyle: {
        flexDirection: 'row',
    },
    titleSubdes: {
        marginRight: 5
    },
    titleText: {
        fontSize: 16,
        marginLeft: 3,
        color: '#1f1f1f',
    },
    titleImage: {
        width: 35,
        height: 35
    },
    titleContainer: {
        flexDirection: 'row',
        height: 50,
        alignItems: 'center',
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor: '#fff',
        marginBottom: 1,
        justifyContent: 'space-between'
    },
    container: {
        marginTop: 10,
        height: 190,
    }
})